
<html>

  <head>
    <meta charset="utf-8">
    <title>勇创国际查单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="/h5/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" href="/h5/css/app.css?v=1">

  </head>
<style type="text/css">
    [v-cloak]{
        display: none;
    }
    body{
        background-color: #ffffff;
    }
  .top-bar {
      background-color: #BE81F7;
  }
  .logo{
    margin-left: 20%;
    width: 56%;
      height: 57px;
  }
  .title-text{
    font-weight: bold;
  }

  .listView{
    min-height:300px; 
    /*background-image: url(/h5/img/cerbg.jpg);*/
    background-size:100% auto;
    background-color: #ffffff;
    padding-left: 30px;
      margin-top: 50px;
      padding-bottom: 15px;
      border-bottom: 1px solid #8D8D8D;
  }

  .mui-table-view:before{
    background-color: #ffffff;
  }

  .mui-table-view:after{
    background-color: #ffffff;
  }
  .title {
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-top: 30px;
  }

    .top_box{
        width: 100%;
        height: 60px;
        text-align: center;
        background-color: #00B7EE;
    }

    .top_box img{
        height: 60px;
        vertical-align: middle;
    }

  .top_box span{
      height: 60px;
      line-height: 60px;
      color: #ffffff;
  }

    .top_title{
        height: 40px;
        line-height: 50px;
        color: #ffffff;
    }

    .top_title_en{
        height: 20px;
        line-height: 20px;
        color: #ffffff;
        font-size: 10px;
    }

    .title_cn{
        height: 20px;
        line-height: 20px;
        font-weight: bold;
        font-size: 20px;
    }

    .title_en{
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }

    .item_cn{
        height: 20px;
        width: 17%;
        float: left;
        font-weight: bold;
        font-size: 16px;
    }

    .item_en{
        font-size: 11px;
        line-height: 9px;
    }

    .item_value{
        float: left;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
    }

    .item_value_font{
        float: left;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
        color: red;
        font-size: 16;
    }

    .footer_box{
        width: 100%;
        text-align: center;
        font-size: 10px;
        height: 20px;
        line-height: 20px;
        margin-top: 30px;
        color: #A4A4A4;
    }

    .footer_box_en{
        width: 100%;
        text-align: center;
        font-size: 10px;
        height: 10px;
        line-height: 10px;
        color: #A4A4A4;
    }

    .item_long{
        width: 50%;
        height: auto;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }

    .check_box{
        background-color: #00B7EE;
        width: 80%;
        height: 50px;
        margin-left: 10%;
        margin-top: 40px;

    }

    .no_input{
        width: 70%!important;
        height: 45px;
        margin-top: 5px;
        margin-left: 5px;
        border-radius: 5px;
        border:0;
    }

    .check_btn{
        width: 10%;
        text-align: center;
        color: #ffffff;
        font-size: 18px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
</style>

  <body>
    <!--<header class="mui-bar mui-bar-nav top-bar">-->
      <!--&lt;!&ndash;<h1 class="mui-title" style="font-size:15px;color:#ffffff;">艾法诺培训证书信息查询平台</h1>&ndash;&gt;-->
    <!--</header>-->
    <div id="index" class="mui-content" style="background-color:#ffffff;" v-cloak>
          <div class="top_box">
              <!--<img src="/h5/img/logo.png">-->
              <div class="top_title">勇创国际查单</div>
          </div>

        <div class="check_box">
            <input class="no_input" type="text" class="mui-input-clear" v-model="inputOrderNumber" placeholder="请输入单号">
            <span class="check_btn" v-on:click="search">查询</span>
        </div>
          <!--<div class="title">-->
              <!--<div class="title_cn">培训合格证书</div>-->
              <!--<div class="title_en">CERTIFICATE OF TRAINING</div>-->
            <!--&lt;!&ndash;<font size='4' class='title-text'>培训合格证书</font>&ndash;&gt;-->

          <!--</div>-->
          <ul class="mui-table-view listView" v-cloak v-for="item in orderList">
              <li class="mui-table-view-cell"><div class="item_cn">订单号 </div> <div class="item_value">{{item.order_no}}</div></li>
                 <li class="mui-table-view-cell" v-show="item.type_name !== null&&item.type_name !== ''"><div class="item_cn">状态 </div> <div class="item_value_font">{{item.type}}</div></li>
                 <li class="mui-table-view-cell" v-show="item.type_name === null||item.type_name === ''"><div class="item_cn">状态 <div class="item_en">Type</div></div> <div class="item_value_font">无法入库，请填写接龙表格！</div></li>
                 <!--<li class="mui-table-view-cell"><strong>发证机构 :</strong> <span>{{ns_place}}</span></li>-->
                 <li class="mui-table-view-cell"><div class="item_cn">箱体积 </div> <div class="item_value item_long">{{item.volume}}

                         <span   lang=EN-US>m</span>
                         <sup>
                             <span lang=EN-US style='mso-bidi-font-size:10.5pt'>3</span>
                         </sup>
                     </div></li>
                 <li class="mui-table-view-cell"><div class="item_cn">体积重 </div> <div class="item_value item_long">{{item.volume_weight}} kg</div></li>
                 <li class="mui-table-view-cell"><div class="item_cn">实重 </div> <div class="item_value item_long">{{item.actual_weight}} kg</div></li>
                 <li class="mui-table-view-cell"><div class="item_cn">长 </div> <div class="item_value"> {{item.long}} cm</div></li>
                 <li class="mui-table-view-cell"><div class="item_cn">宽 </div> <div class="item_value item_long">{{item.wide}} cm</div></li>
                 <li class="mui-table-view-cell"><div class="item_cn">高 </div> <div class="item_value item_long">{{item.height}} cm</div></li>
              <li class="mui-table-view-cell"><div class="item_cn">取值 </div> <div class="item_value item_long">{{item.gvalue}} kg</div></li>
              <li class="mui-table-view-cell"><div class="item_cn">计费重 </div> <div class="item_value item_long">{{item.charge_value}} kg</div></li>
          </ul>




    </div>
    <script src="/h5/js/mui.min.js"></script>
  </body>

</html>
<script src="/h5/js/jquery.min.js" ></script>
<script src="/h5/js/vue.min.js" ></script>
<script> 
  new Vue({
    el: '#index',
    data: {
        inputOrderNumber:"",
        orderNumber:'',
        type:"",
        Weight:"",
        long:"",
        wide:"",
        height:"",
        gvalue:"",
        charge_value:"",
        orderList:[]
    },
    mounted: function(){
        var self = this;
        var id = self.GetUrlParam("id");
        $.ajax({
            type:"GET",
            url:"/asset/startForm",
            data: {
            },
            dataType:"json",
            success:function(res){

            }
        });

//        $.ajax({
//            type:"GET",
//            url:"/asset/login",
//            data: {
//                loginName:"lijing",
//                password:"123456"
//            },
//            dataType:"json",
//            success:function(res){
//                console.log(res);
//            }
//        });

           
    },
    methods: {
      GetUrlParam:function(paraName) {
  　　　　var url = document.location.toString();
  　　　　var arrObj = url.split("?");
  　　　　if (arrObj.length > 1) {
  　　　　　　var arrPara = arrObj[1].split("&");
  　　　　　　var arr;
  　　　　　　for (var i = 0; i < arrPara.length; i++) {
  　　　　　　　　arr = arrPara[i].split("=");
  　　　　　　　　if (arr != null && arr[0] == paraName) {
  　　　　　　　　　　return arr[1];
  　　　　　　　　}
  　　　　　　}
  　　　　　　return "";
  　　　　}
  　　　　else {
  　　　　　　return "";
  　　　　}
  　　},

     search:function(){
          var self = this;
         $.ajax({
             type:"GET",
             url:"/shop/checkNumber",
             data: {
                 orderNumber:self.inputOrderNumber
             },
             dataType:"json",
             success:function(res){
                 console.log(res);
                 if(res  === "null"|| res == null){
                     mui.toast("查不到此单号，请重新输入！");
                     self.inputOrderNumber = "";
                     return;
                 }
                 self.orderList = res;

             }
         });
     }
    }
  });
</script> 